<template>
  <div class="music-app">
    <!-- 导航菜单 -->
    <nav class="music-nav">
      <a-menu 
        mode="horizontal" 
        :default-selected-keys="[activeMenu]" 
        class="nav-menu"
      >
        <img 
          @click="navigateTo('/')" 
          src="/background_index.jpg" 
          alt="首页"
          class="nav-logo"
        >
        <a-menu-item 
          v-for="item in menuItems" 
          :key="item.key"
          @click="navigateTo(item.path)"
          class="nav-item"
        >
          {{ item.title }}
        </a-menu-item>
        <a-input-search 
          v-model="searchText" 
          @search="handleSearch"
          placeholder="寻觅音乐" 
          class="nav-search"
        />
      </a-menu>
    </nav>

    <n-divider class="nav-divider" />

    <!-- 内容区域 -->
    <main class="music-content">
      <RouterView v-slot="{ Component }">
        <KeepAlive>
          <component :is="Component" />
        </KeepAlive>
      </RouterView>
    </main>

    <!-- 页脚 -->
    <GlobalFooter :links="footerLinks" :copyright="copyright" class="app-footer" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NDivider } from 'naive-ui'

const router = useRouter()
const route = useRoute()

// 响应式数据
const searchText = ref('')
const activeMenu = computed(() => {
  const pathMap = {
    '/functions/music/index/index': '1',
    '/functions/music/me': '2',
    '/functions/music/rec': '3',
    '/functions/music_play': '4'
  }
  return pathMap[route.path] || '1'
})

// 导航配置
const menuItems = [
  { key: '1', title: '音乐馆', path: '/functions/music/index/index' },
  { key: '2', title: '我的音乐', path: '/functions/music/me' },
  { key: '3', title: '推荐', path: '/functions/music/rec' },
  { key: '4', title: '播放列表', path: '/functions/music_play' }
]

// 页脚配置
const footerLinks = [
  { key: 'help', title: '帮助', href: '/help', blankTarget: true },
  { key: 'privacy', title: '隐私政策', href: '/privacy', blankTarget: true },
  { key: 'terms', title: '服务条款', href: '/terms', blankTarget: true }
]
const copyright = 'henna © 2024 linyuansheng.com'

// 导航方法
const navigateTo = (path) => {
  router.replace(path)
}

// 搜索功能
const handleSearch = (text) => {
  router.push({ 
    path: '/functions/music/search', 
    query: { textdata: text } 
  })
}
</script>

<style scoped>
.music-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-color);
}

.music-nav {
  padding: 1rem 0;
  background-color: transparent;
}

.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-logo {
  width: 80px;
  height: 50px;
  vertical-align: middle;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.2s;
}

.nav-logo:hover {
  transform: scale(1.05);
}

.nav-item {
  width: 150px;
  font-size: 1.125rem;
  color: var(--text-color);
  transition: color 0.2s;
}

.nav-item:hover {
  color: var(--primary-color);
}

.nav-search {
  width: 320px;
  margin-left: 1rem;
}

.nav-divider {
  margin: 0;
}

.music-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  scrollbar-width: none; /* Firefox */
}

.music-content::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.app-footer {
  margin-top: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-menu {
    flex-wrap: wrap;
    padding: 0.5rem;
  }
  
  .nav-item {
    width: 100px;
    font-size: 1rem;
  }
  
  .nav-search {
    width: 100%;
    margin: 0.5rem 0 0 0;
  }
}
</style>